<template>
  <div class="right">
    <div class="itemLefthead">自定义算法</div>
    <div class="itemList">
      <div class="searchBox">
        <el-input
          class="bin_input"
          v-model="searchKey"
          placeholder="请输入内容"
          style="width: 60%; visibility: hidden"
        >
          <template slot="append">
            <el-button class="btn search" @click="searchfn"> 查询 </el-button>
          </template>
        </el-input>

        <el-button class="btn search" @click="addsuanfa"> 新增 </el-button>
      </div>
      <div class="tableBox" ref="tableBox">
        <el-table
          :border="true"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :height="tableH"
          class="bin_table"
        >
          <!-- <el-table-column
            min-width="170"
            resizable
            label="算法名称"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span @click="clickRow(scope.row)" style="cursor: pointer">
                {{ scope.row.algorithmName }}
              </span>
            </template>
          </el-table-column> -->
          <el-table-column
            min-width="170"
            resizable
            prop="exeFilePath"
            label="执行文件"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            min-width="170"
            resizable
            prop="type"
            label="算法类别"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            min-width="170"
            resizable
            prop="sourceFilePath"
            label="源文件"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            min-width="170"
            resizable
            prop="resultFilePath"
            label="执行结果文件"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column resizable label="操作" min-width="120">
            <template slot-scope="scope">
              <i
                class="el-icon-position"
                style="color: #02fff4; font-size: 28px; margin-right: 10px"
                @click="zhixing(scope.row)"
              ></i>
              <i
                class="el-icon-download"
                style="color: #02fff4; font-size: 28px; margin-right: 10px"
                @click="xiazai(scope.row)"
              ></i>
              <img
                class="actBtn"
                :src="require('../../../assets/edit.png')"
                alt=""
                @click="editalg(scope.row)"
              />
              <img
                class="actBtn"
                :src="require('../../../assets/del.png')"
                @click="delete1(scope.row)"
                alt=""
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageBox" v-if="tableData.length">
        <el-pagination
          class="bin_fenyeqi"
          :current-page.sync="query.pageNum"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          prev-text="上一页"
          next-text="下一页"
          popper-class="bin_fenyeqi_popper"
          layout="total, sizes,->,prev, pager, next"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :closeOnClickModal="false"
      class="bin_dialog dialogh9"
      title="自定义算法配置"
      :visible.sync="addDialogVisible"
      width="1200px"
      top="10vh"
      v-zsdialogDrag
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-position="left"
        label-width="150px"
        class="columnBox"
      >
        <el-form-item label="执行文件：" required prop="exeFilePath">
          <el-row style="width: 100%">
            <el-col :span="18"> {{ form.exeFilePath }}</el-col>
            <el-col :span="6">
              <el-upload
                class="upload-demo"
                ref="upload"
                multiple
                action=""
                :show-file-list="false"
                :file-list="fileList"
                :on-progress="progressFile"
                :on-change="changeFile"
                :http-request="uploadFn"
              >
                <el-button class="bin_button" size="mini">选择文件</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="算法类别：" prop="type">
          <el-input
            class="bin_input"
            v-model="form.type"
            placeholder="请输入算法类别"
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="源文件：" required prop="sourceFilePath">
          <el-row style="width: 100%">
            <el-col :span="18"> {{ form.sourceFilePath }}</el-col>
            <el-col :span="6">
              <el-upload
                class="upload-demo"
                ref="upload"
                multiple
                action=""
                :show-file-list="false"
                :file-list="fileList1"
                :on-progress="progressFile1"
                :on-change="changeFile1"
                :http-request="uploadFn1"
              >
                <el-button class="bin_button" size="mini">选择文件</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="结果文件名称：" required prop="resultFilePath">
          <el-input
            class="bin_input"
            v-model="form.resultFilePath"
            placeholder="如果有多个文件输出，文件名之间请用英文逗号隔开"
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <!-- <div
          class="columnIte"
          v-for="(item, index) in paramsLists1"
          :key="index"
        >
          <el-form-item label="参数名称：">
            <el-input
              class="bin_input"
              v-model="item.paramName"
              placeholder="若没有可不填写"
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="参数值：">
            <el-input
              class="bin_input"
              v-model="item.paramValue"
              placeholder="请输入内容"
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="bin_button"
              icon="el-icon-delete"
              size="small"
              @click="deleteBtn(index)"
            >
            </el-button>
          </el-form-item>
        </div>
        <div class="addbtn">
          <el-button
            class="bin_button"
            icon="el-icon-plus"
            size="small"
            @click="addBtn22"
          >
          </el-button>
        </div> -->
        <div class="edit_btns">
          <el-button class="bin_button" size="small" @click="cancelBtn">
            取消
          </el-button>
          <el-button class="bin_button" size="small" @click="goLinkFn">
            确认
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "diyalg",
  data() {
    return {
      dialogType: "add",
      addDialogVisible: false,
      tableH: 0,
      total: 0,
      fileList: [],
      fileList1: [],
      searchKey: "",
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      form: {
        exeFilePath: "",
        type: "",
        sourceFilePath: "",
        resultFilePath: "",
      },
      rules: {
        exeFilePath: [
          { required: true, message: "请上传文件", trigger: "change" },
        ],
        sourceFilePath: [
          { required: true, message: "请上传文件", trigger: "change" },
        ],
        resultFilePath: [
          { required: true, message: "请输入结果文件名称", trigger: "blur" },
        ],
      },
      tableData: [],
      paramsLists1: [],
      // Add your data properties here
    };
  },
  created() {
    this.getTable();
    // Component created
  },
  mounted() {
    this.fetTableHeight();
    // Component mounted
  },
  methods: {
    editalg(row) {
      this.dialogType = "edit";
      this.form = {
        id: row.id,
        exeFilePath: row.exeFilePath,
        type: row.type,
        sourceFilePath: row.sourceFilePath,
        resultFilePath: row.resultFilePath,
      };
      this.addDialogVisible = true;
    },
    zhixing(row) {
      this.$api.executeCustomAlgorithm(row.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });
    },
    xiazai(row) {
      this.$api
        .downloadOneFile({ fileSource: row.url })
        .then((res) => {
          const url = window.URL.createObjectURL(new Blob([res]));
          const link = document.createElement("a");
          link.href = url;
          link.download = row.resultFilePath;
          link.click();
        });
    },
    delete1(row) {
      this.$confirm("确认删除本条数据吗？?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.deleteCustomizeAlgorithm(row.id).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.searchfn();
            }
          });
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.query.pageNum = 1;
      this.query.pageSize = val;
      this.getTable();
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.getTable();
    },
    cancelBtn() {
      this.addDialogVisible = false;
    },
    goLinkFn() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // if (this.value1 == "") {
          //   this.$message({
          //     message: "预选元数据类型不能为空",
          //     type: "warning",
          //   });
          //   return;
          // }
          let params = "";
          const data = {
            ...this.form,
            params,
          };
          if (this.dialogType == "add") {
            this.$api.addCustomAlgorithm(data).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.getTable();
              }
            });
          } else {
            this.$api.updateCustomAlgorithm(data).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.getTable();
              }
            });
          }
          this.addDialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    progressFile(event, file, fileList) {
      console.log("progressFile", event, file, fileList);
    },
    changeFile(files, fileList) {
      console.log("changeFile", files, fileList);

      for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i];
        this.$set(this.fileList, i, { ...file, type: file.raw.type });
      }
      console.log("改变文件后的fileList", this.fileList);
    },
    uploadFn() {
      const formData = new FormData();
      this.fileList.map((file) => {
        formData.append(`multipartFiles`, file.raw);
      });

      this.$api.diyUpload(formData).then((res) => {
        if (res.code === 200) {
          this.$set(this.form, "exeFilePath", res.result);
        }
      });
    },
    progressFile1(event, file, fileList) {
      console.log("progressFile", event, file, fileList);
    },
    changeFile1(files, fileList) {
      console.log("changeFile", files, fileList);

      for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i];
        this.$set(this.fileList1, i, { ...file, type: file.raw.type });
      }
      console.log("改变文件后的fileList", this.fileList1);
    },
    uploadFn1() {
      const formData = new FormData();
      this.fileList1.map((file) => {
        formData.append(`multipartFiles`, file.raw);
      });

      this.$api.diyUpload(formData).then((res) => {
        if (res.code === 200) {
          this.$set(this.form, "sourceFilePath", res.result);
        }
      });
    },

    deleteBtn(idx) {
      if (idx == 0 && this.paramsLists1.length == 1) {
        return;
      }
      if (this.paramsLists1.length) {
        this.paramsLists1 = this.paramsLists1.filter((item, index) => {
          return index !== idx;
        });
      } else {
        this.$message({
          message: "数据不能为空",
          type: "warning",
        });
      }
    },
    addBtn22() {
      let params = JSON.parse(JSON.stringify(this.paramsLists1));
      params.push({
        paramName: "",
        paramValue: "",
      });
      this.paramsLists1 = params;
    },
    getTable() {
      this.query.searchContent = this.searchKey;
      this.$api.queryCustomizeAlgorithm(this.query).then((res) => {
        if (res.code === 200) {
          this.tableData = res.result.content;
          this.total = res.result.totalSize;
        }
      });
    },
    addsuanfa() {
      this.dialogType = "add";
      this.form = {
        exeFilePath: "",
        type: "",
        sourceFilePath: "",
        resultFilePath: "",
      };
      this.addDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },

    searchfn() {
      this.query.pageNum = 1;
      this.getTable();
    },
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableH = 0;
        resolve();
      });
    },
    fetTableHeight() {
      this.resetHeight().then((res) => {
        console.log("tableBox", this.$refs.tableBox);
        this.tableH = this.$refs.tableBox.getBoundingClientRect().height - 10;
      });
    },
    // Add your methods here
  },
  destroyed() {
    // Component destroyed
  },
};
</script>

<style scoped lang="scss">
.right {
  height: 100%;
  width: calc(100%);
  background: rgba(2, 82, 107, 0.6);
  border: 1px solid #02fff4;
  --head-title: 50px;
  .itemLefthead {
    width: 100%;
    display: flex;
    height: var(--head-title);
    background: rgba(2, 255, 244, 0.15);
    border-radius: 0px 0px 0px 0px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    line-height: 59px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-indent: 31px;
    position: relative;
    align-items: center;
    justify-content: space-between;

    &::before {
      width: 5px;
      height: 20px;
      background: #02fff4;
      border-radius: 0px 0px 0px 0px;
      position: absolute;
      left: 20px;
      top: 16px;
      content: "";
    }

    .addBtn {
      width: 100px;
      height: 45px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 45px;
      font-style: normal;
      text-transform: none;
      text-indent: 44px;
      background: url("../../../assets/btn.png") center center no-repeat;
      background-size: 100% 100%;
      margin-right: 10px;
      cursor: pointer;
      position: relative;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/addjia.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 13px;
        content: "";
      }
    }

    .calcImport {
      text-indent: 24px;
      margin-right: 20px;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/expot.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 10px;
        content: "";
      }
    }
  }

  .itemList {
    width: 100%;
    height: calc(100% - var(--head-title));
    padding: 20px;
    box-sizing: border-box;

    .searchBox {
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      ::v-deep .el-input-group__append,
      .el-input-group__prepend {
        background-color: transparent;
        border: none;
      }
    }

    .tableBox {
      height: calc(100% - 95px);
      .docImg {
        cursor: pointer;
        width: 20px;
        height: 25px;
      }
    }

    .actBtn {
      cursor: pointer;
      width: 24px;
      height: 24px;
      margin-right: 10px;

      &:last-child {
        margin: 0;
      }
    }

    .pageBox {
      height: 45px;
      justify-content: space-between;
      align-items: center;

      .bin_fenyeqi {
        display: block !important;
        ::v-deep .el-pagination__rightwrapper {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .btn {
    width: auto;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: inset 0px 0px 15px 1px #02fff4;
    background-color: transparent;
    outline: none;
    border: 1px solid #02fff4;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    position: relative;
  }

  .addBtnexport {
    width: 100px;
    height: 45px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    line-height: 45px;
    font-style: normal;
    text-transform: none;
    text-indent: 44px;
    background: url("../../../assets/btn.png") center center no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
    cursor: pointer;
    position: relative;

    &::before {
      width: 18px;
      height: 18px;
      background: url("../../../assets/exporticon.png") center center no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 20px;
      top: 13px;
      content: "";
    }
  }
}
.columnBox {
  margin-top: 30px;
  ::v-deep .el-form-item__label {
    color: #fff;
  }

  .columnIte {
    width: 100%;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #ffffff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .addbtn {
    width: 100%;
    text-align: center;
    margin-top: 50px;
  }
}

.edit_btns {
  margin-top: 50px;
  display: flex;
  align-self: center;
  justify-content: center;
}
/* Add your styles here */
</style>
